<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../libs/vue.js"></script>
</head>
<body>
    <!-- 
        background-color
        backgroundColor
     -->
    <div id="app">
        <h1>hello</h1>
        <!-- 调用 -->
        <my-item></my-item>
        <my-item></my-item>
    </div>
    <script>
        // 全局组件
        // Vue.component('组件名称','组件配置对象')
        /*
            组件注意事项：
                1.组件中的data必须是一个函数，返回一个对象
                2.组件的template模板必须只有一个根标签
                3.命名组件名称如果是驼峰结构，调用时要改成-连接，举例：myItem => my-item
        */ 

        // 注册
        Vue.component('myItem',{
            template:`
                <div>
                    <h3>我是myitem666{{msg}}</h3>
                    <h4>我是h4</h4>    
                </div>
                
            `,
            // data:{
            //     msg:'hello component'
            // }
            data(){
                return {
                    msg:'hello component'
                }
            }
        })
        let vm = new Vue({
            el:'#app',
            // template选项
            // template:`
            //     <p>我是p标签</p>
            // `,
            data:{

            },
            methods: {
                
            },
        })
    </script>
</body>
</html>